<template>
  <div>
    <header>
      <!-- 注意：动态参数不要使用name，否则会和插槽命名重复 -->
      <slot name="header" :msg="msg" :count="1">dialog头部</slot>
    </header>
    <main>
      <slot>dialog内容区</slot>
    </main>
    <footer>
      <slot name="footer">dialog尾部</slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('我是作用域插槽的prop1')
</script>

<style scoped>

</style>